<template>
  <view
    class="ruler"
    :class="customClass"
    :style="style"
  >
  </view>
</template>

<script>
export default {
  name: 'Ruler',
  props: {
    customClass: String,
    color: String
  },
  computed: {
    style () {
      if (this.color) {
        return `--ruler-color: ${this.color}`
      }
      return ''
    }
  },
  methods: {

  }
}
</script>

<style lang="less">
@color-main: var(--ruler-color, "#cdcdcd");
.ruler {
  &:root {
    --ruler-color: #cdcdcd;
  }
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
  &::before {
    width: 100%;
    height: 100%;
    transform: translateX(-1px);
    background-image: repeating-linear-gradient(
        90deg,
        @color-main 0,
        @color-main 1px,
        transparent 0,
        transparent 25px
      ),
      repeating-linear-gradient(
        90deg,
        @color-main 0,
        @color-main 1px,
        transparent 0,
        transparent 5px
      );
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: 100% 100%, 100% 50%;
    content: "";
  }
}
</style>
